<template>
  <el-calendar class="class-calendar" :style="calendarStyle">
    <template #date-cell="{ data }">
      <div class="date">{{ data.day.split("-").slice(1).join("-") }}</div>
      <div
        @mouseenter="onMouseEnter(item)"
        @mousemove="onMouseMove"
        @mouseleave="onMouseLeave"
        v-for="(item, index) in dates_format(data.day)"
        :key="index"
        :style="classStyle(item)"
      >
        <div v-if="!props.isReport">
          {{ item.classStartTime }}-{{ item.classEndTime }}
        </div>
        <div class="className">{{ item.className }}</div>
      </div>
    </template>
  </el-calendar>
  <!-- 排期详情 -->
  <lessonSchedulePopover
    :scheduleId="info._id"
    :mouseParams="mouseParams"
  ></lessonSchedulePopover>
</template>

<script setup lang="ts">
import lessonSchedulePopover from "@/views/courseManage/components/lessonSchedulePopover.vue";
const { proxy } = getCurrentInstance();

let props = defineProps(["modelValue", "isReport", "gridHeight"]);

let mouseParams = ref({});
let info = ref({});

let calendarStyle = computed(() => {
  return {
    maxHeight: `${props.gridHeight}px`,
  };
});

function dates_format(day) {
  let dates = props.modelValue;
  if (!dates.length) return;
  let list = [];
  for (let index = 0; index < dates.length; index++) {
    const element = dates[index];
    if (element.date == day) {
      element.className = element.className;
      list.push(element);
    }
  }
  return list;
}

function classStyle(e) {
  return {
    backgroundColor: e.classColor || proxy.$utils.getColor(e.className),
    color: "#fff",
    fontSize: "12px",
    padding: "5px 10px",
  };
}

function onMouseMove(params) {
  mouseParams.value = params;
}
function onMouseLeave() {
  info.value = {};
  mouseParams.value = {};
}

function onMouseEnter(params) {
  info.value = params;
}
</script>

<style lang="scss">
.class-calendar {
  overflow-y: auto;
  border-bottom: 1px solid #ebeef5;
  .el-calendar-day {
    height: auto !important;
    min-height: 100px;
  }
}
</style>
<style lang="scss" scoped>
.className {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
}
</style>
